<template>
    <div class="btn">
        <el-button type="warning" @click="autoGetBaseInfo">
            一键填充基础信息
            <el-icon class="el-icon--right"><UserFilled /></el-icon>
        </el-button>
        <el-button type="primary" @click="previewPdf">
            在线预览
            <el-icon class="el-icon--right"><Platform /></el-icon>
        </el-button>
        <el-button type="success" @click="downLoadPdf" :loading="loadingPdf">
            下载PDF
            <el-icon class="el-icon--right"><Printer /></el-icon>
        </el-button>
        <el-button type="danger" @click="configSetting">
            配置属性
            <el-icon class="el-icon--right"><Tools /></el-icon>
        </el-button>
    </div>
    <el-divider content-position="left">
        <strong>xxx简历模板</strong>
    </el-divider>
    <div id="pdfDom" class="simple-box">
        <div class="head">
            <!-- 头部个人信息 -->
            <div class="pic">
                <!-- 头像 -->
                <el-upload
                    class="avatar-uploader"
                    :http-request="()=>{}"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                >
                    <img v-if="baseImageUrl" :src="baseImageUrl" alt="简历头像" class="avatar" width="150" height="150" />
                    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                </el-upload>              
            </div>
            <div class="info">
                <!-- 个人信息 -->
                <p>
                    <strong>姓&emsp;名：</strong>
                    <el-input v-if="!configValue" v-model="resumeParam.name"/>
                    <span v-if="configValue">{{resumeParam.name}}</span>
                </p>
                <p>
                    <strong>年&emsp;龄：</strong> 
                    <el-input v-if="!configValue" v-model="resumeParam.age"/>
                    <span v-if="configValue">{{resumeParam.age}}</span>
                </p>
                <p>
                    <strong>电&emsp;话：</strong>
                    <el-input v-if="!configValue" v-model="resumeParam.phone"/>
                    <span v-if="configValue">{{resumeParam.phone}}</span>
                </p>
                <p>
                    <strong>地&emsp;址：</strong> 
                    <el-input v-if="!configValue" v-model="resumeParam.address"/>
                    <span v-if="configValue">{{resumeParam.address}}</span>
                </p>
                <p>
                    <strong>邮&emsp;箱：</strong> 
                    <el-input v-if="!configValue" v-model="resumeParam.email"/>
                    <span v-if="configValue">{{resumeParam.email}}</span>
                </p>
                <p>
                    <strong>工作经验：</strong>
                    <el-input v-model="resumeParam.workTime"  placeholder="工作年限" >
                        <template #append>年</template>
                    </el-input>
                </p>
            </div>
        </div>
        <div class="foot">
            <div class="left-step">
                <!-- space="2000"  style="flex-basis: 10%;"-->
                <el-steps direction="vertical" >
                    <el-step title="求职信息"  :icon="Edit" >
                        <template  #description >
                            <el-card shadow="hover" class="card">
                                <div class="item">
                                    <strong>面试岗位：</strong>
                                    <el-input v-model="resumeParam.expectJob" type="text" placeholder="面试岗位,建议必填" clearable></el-input>
                                </div>
                                <div class="item">
                                    <strong>期望薪资：</strong>
                                    <el-input v-model="resumeParam.expectSalary" type="text" placeholder="期望薪资,如20k,建议必填" clearable></el-input>
                                </div>
                            </el-card>
                        </template> 
                    </el-step>
                    <el-step title="教育背景"  :icon="Reading">
                        <template  #description >
                            <el-card shadow="hover" class="card">
                                <div class="item">
                                    <strong>学校名称：</strong>
                                    <el-input v-model="resumeParam.schoolName" type="text" placeholder="学校名称,建议必填" clearable></el-input>
                                </div>
                                <div class="item">
                                    <strong>教育时间：</strong>
                                    <el-input v-model="resumeParam.learnTime" type="text" placeholder="教育时间,建议必填" clearable></el-input>
                                </div>
                                <div class="item">
                                    <strong>专业课程：</strong>
                                    <el-input v-model="resumeParam.learnCourse" type="text" placeholder="专业课程,建议必填" clearable></el-input>
                                </div>
                            </el-card>
                        </template>
                    </el-step>
                    <el-step style="flex-basis: 20%;"  :icon="Medal">
                        <template #title>
                            <span style="display:flex;align-items:center;">
                                荣誉证书 <el-icon style="margin-left:10px;cursor: pointer;" @click="resumeParam.honourCertificate.push('')"><CirclePlus /></el-icon>
                            </span>    
                        </template>
                        <template #description> 
                            <el-card shadow="hover" class="card">
                                <div class="honour-item" v-for="(item,index) in resumeParam.honourCertificate" :key="index">
                                    <el-icon ><StarFilled /></el-icon>
                                    <el-input v-model="resumeParam.honourCertificate[index]" type="text" :placeholder="`荣誉${index+1},没有可不填`"></el-input>
                                    <el-icon class="honour-delete-icon" @click="resumeParam.honourCertificate.splice(index,1)"><Close /></el-icon>
                                </div>
                            </el-card>
                        </template>
                    </el-step>
                    <el-step :icon="Calendar">
                        <template #title>
                            <span style="display:flex;align-items:center;">
                                工作经历 <el-icon style="margin-left:10px;cursor: pointer;" @click="resumeParam.workExperience.push('')"><CirclePlus /></el-icon>
                            </span>    
                        </template>
                        <template #description>
                            <el-card shadow="hover" class="card">
                                <div class="work-item" v-for="(item,index) in resumeParam.workExperience" :key="index">
                                    <el-input v-model="resumeParam.workExperience[index]" type="text" :placeholder="`${index+1}、工作经历,建议填写`"></el-input>
                                    <el-icon class="work-delete-icon" @click="resumeParam.workExperience.splice(index,1)"><Close /></el-icon>
                                </div>
                            </el-card>
                        </template>
                    </el-step>
                    <el-step :icon="Monitor">
                        <template #title>
                            <span style="display:flex;align-items:center;">
                                专业技能 <el-icon style="margin-left:10px;cursor: pointer;" @click="resumeParam.professionalSkills.push('')"><CirclePlus /></el-icon>
                            </span>    
                        </template>
                        <template #description>
                            <div class="technology">
                                <el-card shadow="hover" class="card">
                                    <div class="technology-item" v-for="(item,index) in resumeParam.professionalSkills" :key="index" style="position:relative">
                                        <el-input :prefix-icon="StarFilled" v-model="resumeParam.professionalSkills[index]" type="text" :placeholder="`技术${index+1},没有可不填`"></el-input>
                                        <el-icon class="delete-icon" @click="resumeParam.professionalSkills.splice(index,1)"><Close /></el-icon>
                                    </div>         
                                </el-card>
                            </div>
                        </template>
                    </el-step>
                    <el-step title="自我评价"  :icon="User">
                        <template #description>
                            <div class="self-speak">
                                <el-card shadow="hover" class="card">
                                    <el-input v-model="selfSpeak" type="textarea" rows="8" placeholder="自我评价,建议填写..."></el-input>
                                </el-card>
                            </div>
                        </template>
                    </el-step>
                    <el-step class="end-step" title="" :icon="Check" />
                </el-steps>
            </div>
        </div>
    </div>
    <!-- 配置 -->
    <el-drawer v-model="configVisible" :show-close="true" title="自动生成简历配置">
        <div class="config-box" v-for="(config,index) in resumeConfigList" :key="index">
            <div class="item" v-if="config.type == 'switch' ">
                <el-tooltip class="box-item" effect="dark" :content="config.tip" placement="top">
                    <span>{{index+1}}、{{config.describe}}</span>
                </el-tooltip>               
                <el-switch v-model="config.value" @change="changeResumeConfig(config.id)" class="ml-2" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949; margin-left: 20px"/>
                <el-divider />
            </div>           
        </div>
    </el-drawer>
</template>

<script setup>
// import htmlToPdf from '@/utils/htmlToPdf.js'
import htmlToPdf from '@/utils/htmlToPdf2.js'
import { User,Reading, UserFilled,Medal, Calendar, Monitor,Edit,StarFilled,Check,CirclePlus,Close,Printer,Platform,Tools,Plus } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import {debounce, gatewayPrefix, userMiddleContextPath, avatarUrlPrefix} from '@/utils/commConstance'
import { $http } from "@/utils/axios";
const job=ref('java开发工程师')
const workSee=ref('')
const selfSpeak=ref('')
const loadingPdf=ref(false)
const configVisible=ref(false)
const imageUrl = ref('')
const baseImageUrl = ref('')
const resumeParam=reactive({
    name: '',
    age: '',
    phone: '',
    address: '',
    email: '',
    workTime: '',
    expectJob: '',
    expectSalary: '',
    schoolName: '',
    learnTime: '',
    learnCourse: [],
    // 荣誉证书
    honourCertificate: [''],
    // 工作经历
    workExperience: [''],
    // 技术
    professionalSkills: [''],
    // 自评
    selfSpeakless: ''
})
const resumeConfigList=ref([
    {id: 1001,code: 'baseInfoConfig', describe: '是否自动获取并填充当前用户个人基础信息', value: false, type:"switch", tip: '开启则从后台直接获取,关闭则需要自己填写'},
    {id:1002,code: 'saveCurrentMode', describe: '填写完所有信息后是否需要保存该模板,默认不保存', value: true, type:"switch", tip: '开启则保存当前已填写的简历模板，后面可以从个人信息中查看并下载简历pdf,关闭则填写完本次简历下载pdf后，不保存本次记录'}
])
const handleAvatarSuccess = (response,uploadFile) => {
    imageUrl.value = URL.createObjectURL(uploadFile.raw)
}

const beforeAvatarUpload = (rawFile) => {
    const fileTypes = ['image/jpeg','image/jpg','image/png']
    if(!fileTypes.includes(rawFile.type)){
        return ElMessage.warning('上传图片格式错误,只能为 jpeg、jpg、png类型 ')
    }
    let fd = new FormData();
    fd.append("file",rawFile)
    $http.post(`${gatewayPrefix}/${userMiddleContextPath}/userResume/uploadResumeAvatar`,fd).then(res=>{
        if(res){
            //返回名称
            baseImageUrl.value = avatarUrlPrefix + res
            ElMessage.success('上传成功')
        }else{
            ElMessage.error('上传失败')
        }       
    })
}
// 下载
const downLoadPdf = ()=>{
    // todo:数据校验
    
    loadingPdf.value=true
    htmlToPdf.getPdf('简单简历',loadingPdf.value)
    setTimeout(() => {
        loadingPdf.value = false;
        ElMessage.success('下载成功!');
    }, 1000);
}
// 预览
const previewPdf = ()=>{
    console.log(resumeParam)
}
// 配置
const configSetting = ()=>{
    configVisible.value=true
}
//修改
const changeResumeConfig = (id)=>{
    ElMessage.success('修改配置==>' + id)
    configValue.value = true

}
// 一键填充个人信息
const configValue = ref(false)
const autoGetBaseInfo = ()=>{
    // 1、获取配置 baseInfoConfig
    if(!configValue.value){
        return ElMessage.warning('无法一键填充个人信息,请开启自动填充个人信息配置 ~ ~ ~')
    }

    $http.get(`${gatewayPrefix}/${userMiddleContextPath}/userResume/getResumeBaseInfo`).then(res=>{
        resumeParam.name=res.userName
        resumeParam.age=res.userAge
        resumeParam.phone=res.userPhone
        resumeParam.address=res.userAddress
        resumeParam.email=res.userEmail
    })


}
</script>

<style lang="less" src="../../assets/css/simpleResumeFrame.less"></style>